<template>
    <DashboardHeader />
    <div class="dashboard-grid">
      <!-- Left Column -->
      <div class="left-column">
        <InfoPanel title="人员统计">
          <StaffStatsPanel />
        </InfoPanel>
        <InfoPanel title="各部门人员统计">
          <DeptStaffChart />
        </InfoPanel>
        <InfoPanel title="能力结构统计">
          <SkillChart />
        </InfoPanel>
      </div>
  
      <!-- Center Column -->
      <div class="center-column">
         <div class="salary-panels-container">
           <SalaryPanel type="month" amount="38.00" />
           <SalaryPanel type="quarter" amount="138.00" />
           <SalaryPanel type="year" amount="688.00" />
         </div>
         <MapPanel />
      </div>
  
      <!-- Right Column -->
      <div class="right-column">
         <InfoPanel title="部门人力成本构成">
           <DeptCostChart />
         </InfoPanel>
         <InfoPanel title="年龄、司龄、工龄结构">
            <AgeStructurePanel />
         </InfoPanel>
         <InfoPanel title="性别统计">
            <GenderStatsPanel />
         </InfoPanel>
      </div>
    </div>
</template>
  
<script setup lang="ts">
  import DashboardHeader from './components/DashboardHeader.vue';
  import InfoPanel from './components/InfoPanel.vue';
  import SalaryPanel from './components/SalaryPanel.vue';
  import MapPanel from './components/MapPanel.vue';

  import StaffStatsPanel from './components/panels/StaffStatsPanel.vue';
  import DeptStaffChart from './components/panels/DeptStaffChart.vue';
  import SkillChart from './components/panels/SkillChart.vue';
  import DeptCostChart from './components/panels/DeptCostChart.vue';
  import AgeStructurePanel from './components/panels/AgeStucturePanel.vue';
  import GenderStatsPanel from './components/panels/GenderStatsPanel.vue';
  
  </script>
  
  <style lang="less" scoped>
  @import './variables.less';
  
  .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; // Adjust ratio if needed
    gap: @grid-gap;
    flex-grow: 1; // Allow grid to fill remaining vertical space
    width: 100%;
  }
  
  .left-column, .right-column, .center-column {
    display: flex;
    flex-direction: column;
    gap: @grid-gap;
  }
  
  // Container specifically for salary panels if needed for layout adjustments
  .salary-panels-container {
      display: flex;
      gap: 15px; // Space between salary panels
      flex-shrink: 0; // Prevent shrinking
  }
  </style>